<!doctype html>
<html>
    <head>
        <title>HT for Web 折叠组件手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 折叠组件手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_accordionview">折叠组件</a></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT for Web</code>提供了折叠组件类<code>ht.widget.AccordionView</code>，用于多组件的折叠展开效果，
提供水平和垂直两种布局方式，折叠组件以<code>position</code>为<code>absolute</code>方式进行绝对定位。</p>

<div id="ref_accordionview"></div>

<h2>折叠组件</h2>

<p>折叠组件类<code>ht.widget.AccordionView</code>主要可配置属性和函数如下：</p>

<ul><li><code>isDisabled()</code>和<code>setDisabled(true/false, iconURL)</code>获取和设置整个组件处于不可用状态</li><li><code>getExpandIcon()</code>和<code>setExpandIcon(icon)</code>获取和设置展开图标</li><li><code>getCollapseIcon()</code>和<code>setCollapseIcon(icon)</code>获取和设置合并图标</li><li><code>getTitleHeight()和</code>setTitleHeight(24)`获取和设置标题高度。 </li><li><code>getTitleBackground()</code>和<code>setTitleBackground(color)</code>获取和设置标题背景色</li><li><code>getSelectBackground()</code>和<code>setSelectBackground(color)</code>获取和设置标题选中背景色</li><li><code>getSeparatorColor()</code>和<code>setSeparatorColor(color)</code>获取和设置分割线颜色</li><li><code>getOrientation()</code>和<code>setOrientation(v/h)</code>布局方向，默认为<code>vertical</code>或<code>v</code>，可设置为<code>horizontal</code>或<code>h</code></li><li><code>add(title, content, expanded, icon)</code>添加组件：<ul><li><code>title</code>组件的标题文字信息，不同组件不得相同</li><li><code>content</code>组件内容，可为<code>HT</code>框架提供的组件对象，也可为原生<code>HTML</code>元素</li><li><code>expanded</code>组件是否展开，默认为<code>false</code></li><li><code>icon</code>组件标题显示的图标</li></ul></li><li><code>remove(title)</code>删除指定标题组件</li><li><code>clear()</code>清除所有标题组件。  </li><li><code>getLabelColor(title)</code>和<code>setLabelColor(color)</code>获取标题文字颜色</li><li><code>getLabelFont(title)</code>获取标题字体，可重载自定义</li><li><code>getTitles()</code>获取所有标题的<code>ht.List</code>列表对象 </li><li><code>getCurrentTitle()</code>获取当前展开标题组件</li><li><code>isExpanded(title)</code>判断标题组件是否展开</li><li><code>expand(title)</code>展开标题组件     </li><li><code>onExpanded(title)</code>展开标题时调用，可重载做后续处理</li><li><code>collapse()</code>合并当前展开标题</li><li><code>onCollapsed(title)</code>合并标题时调用，可重载做后续处理</li><li><code>drawTitle(g, title, width, height, info)</code>绘制标题内容，可重载自定义</li></ul>

<p><iframe src="examples/example_basic.html" style="height:300px"></iframe></p>

<p>采用简写<code>horizontal</code>的<code>h</code>简写形式设置成水平布局方式</p>

<pre><code>leftAccordion.setOrientation(&#39;h&#39;);</code></pre>

<p>重载<code>getLabelFont</code>函数根据<code>getCurrentTitle()</code>决定显示字体      </p>

<pre><code>leftAccordion.getLabelFont = function(title){
    return title === this.getCurrentTitle() ? &#39;bold 15px arial, sans-serif&#39; : &#39;13px arial, sans-serif&#39;;
};</code></pre>

<p>通过<code>setCollapseIcon</code>和<code>setExpandIcon</code>分别设置了两个矢量格式的合并和展开图标</p>

<pre><code>leftAccordion.setCollapseIcon({
    width: 14,
    height: 14,
    comps: [
        {
          type: &#39;shape&#39;,
          points: [0, 7, 14, 7, 7, 0, 7, 14],
          segments: [1, 2, 1, 2],
          borderWidth: 1,   
          borderColor: &#39;#303030&#39;
        }
    ]
});
leftAccordion.setExpandIcon({
    width: 16,
    height: 16,
    comps: [
        {
          type: &#39;shape&#39;,
          points: [0, 8, 16, 8],
          segments: [1, 2],
          borderWidth: 1,   
          borderColor: &#39;#303030&#39;
        }
    ]
});</code></pre>

<p>构建了<code>div</code>组件，设置其<code>position</code>为<code>absolute</code>的绝对定位方式，并设置了矢量标题图标</p>

<pre><code>function addView(accordionView, shape, color, expand){
    var div = document.createElement(&#39;div&#39;);  
    div.style.position = &#39;absolute&#39;;                
    div.style.background = color;

    accordionView.add(shape, div, expand, {
        width: 16,
        height: 16,
        comps: [
            {
              type: shape,
              rect: [0, 0, 16, 16],
              background: color,    
              gradient: gradient
            }
        ]
    });
}</code></pre>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
